<template>
   <div>
     
       <div  id="SmallNaviBox" class="flex" @mouseleave.stop="NaviDown" ref="SmallNaviBox">
          <button class="login" @click="LOGINSTATEON" v-if="!User" id="LoginBox">登录</button>
          <img :src="User.headphoto" class="login"  @mouseenter="NaviOn" ref="headphoto"  v-else-if="!NaviState">

          <div id="Navi" class="flex"  ref="Navi"  v-else>
              <img :src="User.headphoto" class="login loginBig">
              <div class="NaviOneBox" v-for="item in NaviData" :key="item.id">
                  <div v-if="item.line" class="hr" > </div>
                    <button class="NaviOne flex" @click="switchEvent(item.id)">
                        <i :class="item.icon" class="icon"/>
                        <div>{{item.name}}</div>
                        <i class="el-icon-arrow-right exit"></i>
                    </button>
              </div>
          </div>


          <div id="Fun" class="flex">
            <div class="FunIconBox flex" v-for="item in FunData" :key="item.id" @click="item['click'](item)" 
                    v-show="item.id>=4 || Subject.name!=item.name">
                 <font-awesome-icon :icon="item.icon" class="FunIcon" :style="getFunStyle(item.hoverColor)" />
            </div>      
          </div>
       </div>

       

   </div>
</template>
<script>
import {mapMutations, mapState} from 'vuex'
  export default 
  {
     name :'', 
     data(){
        return{
            NaviData:[
                {id:1,name:'个人中心',line:false,icon:'el-icon-house'},
                {id:2,name:'文章回收',line:true,icon:'el-icon-delete'},
                {id:3,name:'系统消息',line:false,icon:'el-icon-message'},
                {id:4,name:'退出账号',line:false,icon:'el-icon-switch-button'},
            ],
            FunData:[
                {id:1,icon:'fa-moon',hoverColor:'#03e9f4',content:'切换为夜间模式',name:'Night',click:this.ChangeSubject},
                {id:2,icon:'fa-sun',hoverColor:'#FEA500',content:'切换为日间模式',name:'Day',click:this.ChangeSubject},
                {id:3,icon:'star-and-crescent',hoverColor:'#5C5893',content:'切换为暗黑模式',name:'Dark',click:this.ChangeSubject},
                {id:4,icon:'pen-to-square',hoverColor:'skyblue',content:'发布博客',click:this.openPublic},
                {id:5,icon:'magnifying-glass',hoverColor:'#39C5BB',content:'搜索',click:this.SEARCHON},
            ],

            NaviState:false,
        }
     },
     computed:{
        ...mapState('Login',['User']),
         ...mapState('Setting',['SubjectData','Subject']),
     },
     methods:{
        //弹出登录框
        ...mapMutations('Login',['LOGINSTATEON']),
        //弹出发布框
        ...mapMutations('Article',['SETPUBLISHSTATE']),
        //弹出搜索框
        ...mapMutations('Search',['SEARCHON']),
        //设置主题
        ...mapMutations('Setting',['SETSUBJECT']),
        //打开回收站
        ...mapMutations('Personal',['RECYCLEBINON']),
        //打开系统消息
        ...mapMutations('Report',['SETSYSTEMINFO']),

        NaviOn(){
           this.NaviState=true
        },
        NaviDown(){
           this.NaviState=false
        },
         getFunStyle(color){
            return{'--hoverColor':color}
         },
         //  切换主题
         ChangeSubject(item){
             this.$public.AddInform({content:item.content,backColor:item.hoverColor,icon:item.icon,FAI:true,classify:'subject'})
             
             let data=this.SubjectData.find(subject => item.name==subject.name)
             this.SETSUBJECT(data)

         },
         //打开编辑组件
         openPublic(item){
               if(this.User == null) return this.$public.toLogin()
               let data={index:1,title:item.content}
                return this.SETPUBLISHSTATE(data)
         },
        /*
            1:个人中心 2:  3:切换账号 4:退出账号
        */
        switchEvent(id){
            this.NaviState=false
            if(id==1) {
                this.$public.ToPersonal(this.User.uid)
            }
            else if(id == 2) this.RECYCLEBINON()
            else if(id  == 3) this.SETSYSTEMINFO(true)
            else if(id==4)  return this.Logout()
        },
       
        Logout(){ 
            let data={content:'你已退出登录',backColor:'gray',icon:'el-icon-warning-outline',duration:1}
            this.$public.AddInform(data)
            let uid = this.User?.uid
            this.$public.Logout(uid)
        },
     }
  }
</script>
<style scoped lang="less">
.login{
    border-radius: 50%;
    width: 40px;height: 40px;
    background: var(--GeneralBackColor);
    color: white;
    position: relative;
    z-index: 100;
    transition-duration: 0.2s;
    object-fit: cover;

}
#LoginBox{
    box-shadow: 0 0 5px white;
}
.loginBig{
   width: 60px;
   height: 60px;
   animation: large 0.2s linear;
   margin-bottom: 20px;
}
@keyframes large {
    from{
         width: 40px;
         height: 40px;
    }     
    to{
         width: 60px;
         height: 60px;
    }
}
#Fun{
    margin-left: 10px;
    justify-content: flex-start;

    .FunIconBox{
        margin-left: 10px;
        width: 40px;height: 40px;
        border-radius: 50%;
    }
    .FunIconBox:hover .FunIcon{
          color: var(--hoverColor);
          filter: drop-shadow(0 0 2px var(--hoverColor) ) 
                  drop-shadow(0 0 15px var(--hoverColor) ) 
                // drop-shadow(0 0 25px var(--hoverColor) );
    }
    .FunIcon{
        width: 25px;height: 25px;
        color: white ;
    }

}

#SmallNaviBox{
    width:250px;
}
#Navi{
    width: 100%;
    position: absolute;
    top: 0;z-index: 1000;
    overflow: hidden;
    flex-wrap: wrap;
    background: var(--Pattern);
    box-shadow: 0px 0px 10px  var(--GeneralBackColor);
    border-radius: 10px;
    padding: 15px;box-sizing: border-box;
}
.NaviOneBox{
    width: 100%;
}
.NaviOne{
    line-height: 30px;
    width: 100%;
    border-radius: 5px;
    font-size: 15px; 
    color: var(--fontColor);
    justify-content: flex-start;
    padding: 5px 10px;
    box-sizing: border-box;
    position: relative;

    .icon{
        margin-right: 10px;
        font-size: 18px; 
    }
}
.NaviOne:hover{
    background: gray;
    color: white;
}
</style>